<script setup lang="ts">
// import Ref from "./components/Ref.vue";
// import Reactive from "./components/Reactive.vue";
// import ToXxx from "./components/ToXxx.vue";
// import Computed from "./components/Computed.vue";
// import ComputedCase from "./components/ComputedCase.vue";
// import Watch from "./components/Watch.vue";
// import WatchEffect from "./components/WatchEffect.vue";

// import LifeCycle from "./components/LifeCycle.vue";
// import { ref } from "vue";
// const flag = ref(true);

// import BEMLayout from "./components/BEMLayout.vue";
// import Parent from "./components/communication/Parent.vue";

// import Card from "./components/global-local-recursive/Card.vue";

// import { reactive } from "vue";

// const tree = reactive<TreeNode[]>([
//   {
//     name: "1",
//     checked: false,
//     children: [
//       { name: "1-1", checked: false },
//       { name: "1-2", checked: false },
//     ],
//   },
//   {
//     name: "2",
//     checked: false,
//     children: [
//       { name: "2-1", checked: false },
//       { name: "2-2", checked: true },
//       { name: "2-3", checked: false },
//     ],
//   },
//   {
//     name: "3",
//     checked: false,
//     children: [
//       { name: "3-1", checked: false },
//       {
//         name: "3-2",
//         checked: false,
//         children: [
//           { name: "3-2-1", checked: true },
//           { name: "3-2-2", checked: false },
//         ],
//       },
//       { name: "3-3", checked: false },
//     ],
//   },
// ]);
// import Tree from "./components/global-local-recursive/Tree.vue";

// import Tab from "./components/dynamic/Tab.vue";

// import Slot from "./components/Slot.vue";

// import ScopedSlot from "./components/ScopedSlot.vue";

import Skeleton from "./components/Skeleton.vue";
import { defineAsyncComponent } from "vue";
const Async = defineAsyncComponent(() => import("./components/Async.vue"));
</script>

<template>
  <div class="container max-w-7xl mx-auto my-6 p-6">
    <!-- <Ref /> -->
    <!-- <Reactive /> -->
    <!-- <ToXxx /> -->
    <!-- <Computed /> -->
    <!-- <ComputedCase /> -->
    <!-- <Watch /> -->
    <!-- <WatchEffect /> -->

    <!-- <div>
    <LifeCycle v-if="flag" />
    <div style="margin-top: 2rem">
      <button
        @click="flag = !flag"
        style="
          padding: 0.75rem;
          border: 1px solid #058d97;
          color: white;
          cursor: pointer;
        "
        :style="{ background: !flag ? 'rgb(2, 89, 116)' : 'red' }"
      >
        {{ flag ? "卸载" : "挂载" }}组件
      </button>
    </div>
  </div> -->

    <!-- <BEMLayout /> -->

    <!-- <Parent /> -->

    <!-- 已经由 main.ts 注册为全局组件，无需手动 import -->
    <!-- <Card /> -->

    <!-- <Tree :tree="tree" /> -->

    <!-- <Tab /> -->

    <!-- <Slot>
      <template v-slot:header> 日程安排 </template>
      <template v-slot>
        <ul>
          <li>吃饭</li>
          <li>睡觉</li>
          <li>大豆子</li>
        </ul>
      </template>
      <template v-slot:footer> 吃饱撑的</template>
    </Slot> -->

    <!-- <ScopedSlot>
   
      <template #default="{ data, idx }">
        <div>{{ data }}, {{ idx }}</div>
      </template>
     
      <template #format="{ list }">
        <li v-for="item in list">{{ item.name }} - {{ item.age }}</li>
      </template>
    </ScopedSlot> -->

    <!-- <Skeleton /> -->
    <Suspense>
      <template #default><Async /></template>
      <template #fallback><Skeleton /></template>
    </Suspense>
  </div>
</template>
